<template>
  <div class="hello">
    <h3>{{ msg }}</h3>
    <swiper ref="mySwiper" :options="swiperOptions" class="swiper">
      <swiper-slide v-for="item in swiperList" :key="item.id">
        <img :src="item.imgUrl" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: "carrousel",
   components: {
    Swiper,
    SwiperSlide
  },
  props: {
    msg: String,
  },
  data() {
    return {
      swiperOptions: {
        pagination:{
         el: ".swiper-pagination",
        } ,
          loop: true,
          autoplay: {
            delay:3000
          },
        effect:"flip",
             navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
      swiperList:[
        {
          id:'001',
          imgUrl:require("../assets/swiper-images/swiper-img01.jpg")
        },
        {
          id:'002',
          imgUrl:require("../assets/swiper-images/swiper-img02.jpg")
        },
        {
          id:'003',
          imgUrl:require("../assets/swiper-images/swiper-img03.jpg")
        },
        {
          id:'004',
          imgUrl:require("../assets/swiper-images/swiper-img04.jpg")
        },
        {
          id:'005',
          imgUrl:require("../assets/swiper-images/swiper-img05.jpg")
        },
      ]
    };
  },
  // computed: {
  //   swiper() {
  //     // ref的mySwiper是挂在在实例的的$refs上
  //     return this.$refs.mySwiper.$swiper;
  //   },
  // },
  // mounted() {
  //   console.log("Current Swiper instance object", this.swiper);

  // },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello {
  h3 {
    margin: 30px;
  }
  .swiper {
    border: 1px solid red;
    width: 60%;
    height: 300px;
  }
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
